<template>
  <!--    我是首页-->
  <!--    <el-button type="primary" @click="gotolink">登录</el-button>-->
  <!--最顶部 导航条+巨幕+幻灯片-->
  <div class="row">
    <div class="col-md-12 column">
      <!-- 导航条 -->
      <nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top" style="font-size: 20px;" >
        <div class="container-fluid">
          <span class="mr-3 iconbox iconsmall fill rounded-circle bg-white text-black shadow border-0"><i class="fa fa-book fa-lg" aria-hidden="true" id="fa-book"></i></span>
          <a class="navbar-brand ml-1" href="/" style="font-size: 25px;color:white;"><strong>嘉庚考研圈</strong></a>
          <!-- Toggler -->
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <!-- Collapse -->
          <div class="navbar-collapse collapse ml-3" id="navbarColor02">
            <ul class="navbar-nav mr-auto d-flex align-items-center" id="nav_contain">
              <!-- 有下拉菜单-->
              <li class="nav-item dropdown"  data-toggle="hover">
                <a class="" href="javascript:void(0);"  role="button" @click="change_infor()" style="margin-right: -25px;text-decoration: none">
                  考研资讯 </a>
                <a class="dropdown-toggle dropdown-toggle-split" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
                </a>
                <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown1" style="font-size:15px;">
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_KaoYan()">考研信息</a>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_ZhaoShen()">招生信息</a>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Daily()">考研日报</a>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Recommend()">特别推荐</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Other()">其他</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_colle()">院校信息</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_res()">闲置转卖</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_soc()">积分中心</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_dis()">交流讨论社区 </a>
              </li>
<!--              <li class="nav-item">-->
<!--                <a class="nav-link" href="javascript:void(0);" @click="">留言板</a>-->
<!--              </li>-->
            </ul>
            <!--                搜索框-->
            <form class="form-inline my-2 my-lg-0 mr-4">
              <input class="form-control mr-sm-2" type="search" placeholder="请输入内容" aria-label="Search">
              <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
            <!--                小图标-->
            <ul class="navbar-nav" id="navbar_ul">
              <li class="nav-item"><a class="nav-link" href="javascript:void(0);"><i class="fa fa-commenting" aria-hidden="true"></i></a></li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_deal">
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
                    <div slot="content" class="p-2">
                      查看我的交易
                    </div>
                  </el-tooltip>
                </a>
              </li>


              <li class="nav-item dropdown"  data-toggle="hover">
                <div>
                  <i class="personicon fa fa-user-circle fa-lg " aria-hidden="true" style="margin-top: 13px" @click="change_person_center"></i>
                  <a class="dropdown-toggle dropdown-toggle-split"
                     style="text-decoration: none;" id="navbarDropdown2" data-toggle="dropdown" aria-expanded="false">
                  </a>
                </div>


                <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown2" style="font-size:15px;">
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_person_center">个人中心</a>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_basic">修改信息</a>
                  <div class="dropdown-divider"></div>

                  <div v-show="showButton">
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="Register()">登录</a>
                  </div>
                  <div  v-show="!showButton">
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="quit">退出登录</a>
                  </div>

                </div>
              </li>


            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import "@/assets/css/main.css"
import "@/assets/css/aos.css"
import websocket from "@/utils/websocket";

export default {
  name: "navheader",
  data() {
    return {
      showButton:false,
      activeIndex: '1',
      //设置导航栏变色
      // topNavBg: {
      //   backgroundColor: ''
      // },
    };
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    change_dis(){
      if(this.$router.history.current.path !='/Discussion_Frame/Discussion_Main/All_Discussion'){
        this.$router.push({path:'/Discussion_Frame/Discussion_Main/All_Discussion'});
      }
    },
    change_res()
    {
      if(this.$router.history.current.path =='/Resale/All_Resale'){
        this.$router.push({path:'/Resale/All_Resale'});
      }
      else if(this.$router.history.current.path =='/Resale/My_Resale'){
        this.$router.push({path:'/Resale/My_Resale'});
      }
      else{
        this.$router.push({path:'/Resale/All_Resale'});
      }
    },
    change_colle(){
      if(this.$router.history.current.path =='/Colleges/All_Colleges'){
        this.$router.push({path:'/Colleges/All_Colleges'});
      }
      else if(this.$router.history.current.path =='/Colleges/My_Colleges'){
        this.$router.push({path:'/Colleges/My_Colleges'});
      }
      else {
        this.$router.push({path:'/Colleges/All_Colleges'});
      }

    },
    change_soc(){
      if(this.$router.history.current.path !='/Score'){
        this.$router.push({path:'/Score'});
      }
    },
    change_person_center(){
      if(this.$router.history.current.path !='/Personal/Person_Note'){
        this.$router.push({path:'/Personal/Person_Note'});
      }

    },
    change_basic(){

      if(this.$router.history.current.path !='/Personal_Info/Person_Basic'){
        this.$router.push({path:'/Personal_Info/Person_Basic'});
      }

    },
    change_infor()
    {
      if(this.$router.history.current.path !='/KaoYan_Frame/Information'){
        this.$router.push({path:'/KaoYan_Frame/Information'});
      }
    },
    change_KaoYan(){
      if(this.$router.history.current.path !='/KaoYan_Frame/KaoYan_Info'){
        this.$router.push({path:'/KaoYan_Frame/KaoYan_Info'});
      }
    },
    change_ZhaoShen(){
      if(this.$router.history.current.path !='/KaoYan_Frame/ZhaoShen_Info'){
        this.$router.push({path:'/KaoYan_Frame/ZhaoShen_Info'});
      }
    },
    change_Daily(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Daily_Info'){
        this.$router.push({path:'/KaoYan_Frame/Daily_Info'});
      }
    },
    change_Recommend(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Recommend_Info'){
        this.$router.push({path:'/KaoYan_Frame/Recommend_Info'});
      }
    },
    change_Other() {
      if (this.$router.history.current.path != '/KaoYan_Frame/Other_Info') {
        this.$router.push({path: '/KaoYan_Frame/Other_Info'});
      }
    },
    change_experience(){
      if (this.$router.history.current.path != '/Discussion_Frame/Discussion_Main/Experience_Discussion') {
        this.$router.push({path: '/Discussion_Frame/Discussion_Main/Experience_Discussion'});
      }
    },
    change_question(){
      if (this.$router.history.current.path != '/Discussion_Frame/Discussion_Main/Question_Discussion') {
        this.$router.push({path: '/Discussion_Frame/Discussion_Main/Question_Discussion'});
      }
    },
    // change_talks(){
    //   if (this.$router.history.current.path != '/Idle_Talks') {
    //     this.$router.push({path: '/Idle_Talks'});
    //   }
    // },
    change_deal(){
      if (this.$router.history.current.path != '/Deal_Main/My_Buy_Deals') {
        this.$router.push({path: '/Deal_Main/My_Buy_Deals'});
      }
    },
    //登录
    Register(){
      if(this.$router.history.current.path !='/Gegister'){
        this.$router.push({path:'/Gegister'});
      }
    },

  //  退出登录
    quit(){

      window.sessionStorage.clear();
      websocket.onCloseWs();
      this.$message.success("退出登录成功！");
      this.$router.push({path:'/Gegister'});

    },
    // // 滚动页面时触发导航变色
    // handleScroll () {
    //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    //   // 设置背景颜色的透明度
    //   if (scrollTop) {
    //     this.topNavBg.backgroundColor = `rgba(183, 193, 172,
	  //       	${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
    //   } else if (scrollTop === 0) {
    //     this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
    //   }
    // },
    // // 滚动之前重置
    // beforeDestroy () {
    //   window.removeEventListener('scroll', this.handleScroll)
    // },






  },
  created() {

    //未登录 没有token
    if(!window.sessionStorage.getItem('token') || window.sessionStorage.getItem('token')==null || window.sessionStorage.getItem('token')===''|| window.sessionStorage.getItem('token')===undefined){

      this.showButton=true;  //显示登录

    }


  },





}
</script>

<style scoped>
/*导航栏样式设置*/
/*下拉菜单悬停*/
/*悬停显示*/
.navbar-nav .dropdown:hover>.dropdown-menu {
  display: block;
}
/*虚化菜单按钮  就是 让点击无效的意思*/
.navbar-nav .dropdown>.dropdown-toggle:active
{
  pointer-events: none;
}
.topnav{
  background-color: #B7C1AC;
  opacity: 0.95;
}
.navbar-nav>ul
{
  margin-left: 0px;
}
#nav_contain>li>a
{
  margin-left:20px;
  font-size: 16px;
  color: white;
}
#nav_contain>li>a:hover
{
  font-weight: bold;
}
/*小图标*/
#navbar_ul>li>a>i
{
  color: white;
}
#navbar_ul>li>a>i:hover
{
  color: #223F23;
}
#navbar_ul>li
{
  margin-left: 13px;
}
#navbar_ul
{
  margin-right: 100px;
}
.jumbotron
{
  background: url('~@/assets/back.jpg') no-repeat center;
  background-size:cover;
  line-height: 10px;
  margin-left: -15px;
  margin-right: -15px
}
/*走马灯img*/
/*.carousel{*/
/*  box-shadow: 10px 10px 5px #888888;*/
/*}*/
a,li,ul,h1,h2,h3,h4,h5{
  font-family: YouYuan;
  color: white;
}

/*.navbar-brand>strong:hover*/
/*{*/
/*  font-size: 26px;*/
/*}*/
.personicon:hover{
 color: #234b44;
}

</style>
